<template>
	<div class="home-swiper">
		<swiper :options="swiperOption" v-if="showSwiper">
		    <swiper-slide
		    	v-for="item of list"
		    	:key="item.id"
		    >
				<img :src="item.imgUrl" class="swiper-img">
			</swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
	
</template>

<script>
	export default {
		name:'homeSwiper',
		props: {
			list:Array
		},
		data() {
			return {
				swiperOption:{
					pagination:".swiper-pagination",
					loop:true
				}
			}
		},
		computed: {
			/*轮播图显示的是最后一张图片，是由于初始值由空数组创建*/
			/*可以在图片加载完再显示*/
			showSwiper() {
				return this.list.length;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-swiper /deep/ .swiper-pagination-bullet-active {
		background:#fff;
		opacity:1 !important;
	}
	.home-swiper /deep/ .swiper-pagination-bullet {
		opacity: .5;
	}
	.home-swiper {
		overflow: hidden;
		height: 0;
		padding-bottom: 26.5%;/* 图片的宽高比 */
		.swiper-img {
			width:100%;
		}
	}
</style>